import React, {useRef, useState} from "react";
import {ActionType, PageContainer, ProColumns, ProTable} from "@ant-design/pro-components";
import {Button, Divider, message, Popconfirm, Space, Typography,Image} from "antd";;
import {deleteVideo, queryVideoList} from "@/services/videoService";
import CreateModal from "./components/CreateModal";
import UpdateModal from "./components/UpdateModal"
import VideoInfoModal from "./components/VideoInfoModal"


const AdminVideoPage: React.FC<unknown> = () => {
    const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
    const [updateModalVisible, setUpdateModalVisible] = useState<boolean>(false);
    const [videoInfoModalVisible, setVideoInfoVisible] = useState<boolean>(false);

    const [updateData, setUpdateData] = useState<VideoType.Video>(
        {} as VideoType.Video,
    );
    const [videoInfoData, setVideoInfoData] = useState<VideoType.Video>(
        {} as VideoType.Video
    );


    const actionRef = useRef<ActionType>();

    /**
     *  删除节点
     * @param selectedRows
     */
    const doDelete = async (selectedRows: VideoType.Video[]) => {
        const hide = message.loading('正在删除');
        if (!selectedRows) return true;
        try {
            await deleteVideo(
                selectedRows.find((row) => row.id)?.id || 0,
            );
            message.success('操作成功');
        } catch (e: any) {
            message.error('操作失败，' + e.message);
        } finally {
            hide();
        }
    };


    /**
     * 表格列配置
     */
    const columns: ProColumns<VideoType.Video>[] = [
        {
            title: 'id',
            dataIndex: 'id',
            valueType: 'index',
        },
        {
            title: '用户姓名',
            dataIndex: 'userName',
            hideInSearch: true,
            valueType: 'text',
            hideInForm: true,
            width: 180
        },
        {
            title: '用户ID',
            dataIndex: 'userId',
            hideInTable: true,
            hideInSearch: true,
            valueType: 'text',
            hideInForm: true
        },
        {
            title: '用户头像',
            dataIndex: 'userAvatar',
            hideInSearch: true,
            hideInForm: true,
            valueType: 'image',
            width: 180
        },
        {
            title: '视频封面',
            dataIndex: 'picUrl',
            hideInTable: true,
            hideInSearch: true,
            valueType: 'image',
        },
        {
            title: '视频地址',
            dataIndex: 'videoUrl',
            hideInSearch: true,
            hideInTable: true,
            valueType: 'text',
        },
        {
            title: '视频简介',
            dataIndex: 'text',
            hideInTable: true,
            valueType: 'textarea',
            hideInSearch: true
        },
        {
            title: '视频',
            dataIndex: 'videoSrc',
            valueType:'option',
            hideInSearch:true,
            render:(_,record)=>(
                <Space split={<Divider type="vertical"/>}>
                    <Typography.Link
                        onClick={() => {
                            setVideoInfoData(record)
                            setVideoInfoVisible(true)
                        }}
                    >
                        <Image
                            src={record.picUrl}
                            preview={false}
                            width={180}
                            height={130}
                        />
                    </Typography.Link>
                </Space>
            )
        },
        {
            title: '点赞数',
            dataIndex: 'likeCount',
            valueType: 'digit',
            hideInForm: true
        },

        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            render: (_, record) => (
                <Space split={<Divider type="vertical"/>}>
                    <Typography.Link
                        onClick={() => {
                            setUpdateData(record);
                            setUpdateModalVisible(true);
                        }}
                    >
                        修改
                    </Typography.Link>

                    <Popconfirm
                        title="您确定要删除么？"
                        onConfirm={() => doDelete([record])}
                        okText="确认"
                        cancelText="取消"
                    >
                        <Typography.Link type="danger">删除</Typography.Link>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    return (
        <PageContainer>
            <ProTable<VideoType.Video,VideoType.Video>
                headerTitle="视频管理"
                actionRef={actionRef}
                pagination={{
                    showSizeChanger: true,
                    pageSize:10
                }}
                rowKey="id"
                search={{
                    labelWidth: 'auto',
                    defaultCollapsed: true,
                }}
                toolBarRender={() => [
                    <Button
                        key="1"
                        type="primary"
                        onClick={() => setCreateModalVisible(true)}
                    >
                        新建
                    </Button>,
                ]}
                request={async (params, sorter) => {
                    const searchParams: VideoType.VideoQueryRequest = {
                        ...params,
                    };
                    // eslint-disable-next-line guard-for-in
                    for (const key in sorter) {
                        searchParams.sortField = key;
                        searchParams.sortOrder = sorter[key] as any;
                    }
                    const {data, code} = await queryVideoList(searchParams);

                    return {
                        data: data?.records || [],
                        success: code === 0,
                        total: data.total,
                    } as any;
                }}
                columns={columns}
            />


            <CreateModal
                modalVisible={createModalVisible}
                onSubmit={() => {
                }}
                onCancel={() => setCreateModalVisible(false)}
            />
            <UpdateModal
                videoData={updateData}
                modalVisible={updateModalVisible}
                onInitData={() => {
                }}

                onCancel={() => setUpdateModalVisible(false)}
            />
            <VideoInfoModal
                videoData={videoInfoData}
                modalVisible={videoInfoModalVisible}
                onCancel={() => setVideoInfoVisible(false)}
            />
        </PageContainer>
    )
}

export default AdminVideoPage;
